<!--  news 文件夹下面存放的是与 “新闻模块” 相关的 Vue 组件-->
<!--  国内新闻    -->
<template>
  <div class="container">

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">新闻版块</a></li>
        <li class="breadcrumb-item active" aria-current="page">国内新闻</li>
      </ol>
    </nav>


    <button type="button" @click="getDomesticNews" class="btn btn-outline-success">获取国内新闻</button>

    <ul class="list-group">
      <li class="list-group-item" v-for="item in newslist" :key="item.id">
        <img class="" v-bind:src="item.picUrl" alt="">
        <div class="d-inline-block">
          <p class="text-left text-wrap font-weight-bold">
            <a v-bind:href="item.url" target="_blank">
              {{ item.title }}
            </a>
          </p>
          <span class="text-left small">{{ item.ctime }}</span>
        </div>

      </li>
    </ul>

<!--    <div>-->
<!--      <ul v-for="item in newslist" :key="item.id">-->
<!--        <li>-->
<!--          <img v-bind:src="item.picUrl" alt="">-->
<!--          <div>-->
<!--            <p>-->
<!--              <a v-bind:href="item.url" target="_blank">-->
<!--                {{ item.title }}-->
<!--              </a>-->
<!--            </p>-->
<!--            <span>{{ item.ctime }}</span>-->
<!--          </div>-->
<!--        </li>-->
<!--      </ul>-->
<!--    </div>-->

  </div>
</template>

<script>
  export default {
    name: 'DomesticNews',
    data () {
      return {
        newslist: [
          // {
          //   'ctime': '2020-10-06 17:09',
          //   'title': '连续发生重大生产安全事故，山西、吉林两省政府负责人被约谈',
          //   'description': '中华国内',
          //   'picUrl': 'https://img1.utuku.china.com/300x200/news/20201006/90ef8eef-cd3b-40a8-bd50-5fc0786bb496.png',
          //   'url': 'https://news.china.com/domestic/945/20201006/38819716.html'
          // }
        ]
      }
    },
    methods: {
      async getDomesticNews () {
        const result = await this.$http.get('http://api.tianapi.com/guonei/index', {
          params: {
            key: 'd1032a21949c41bbf6a472ec75a94e2a',
            num: 10
          }
        });
        this.newslist = result.data.newslist
        console.log(result)
      }
    }
  }
</script>

<style scoped>

  ul li img {
    width: 170px;
    height: 100px;
  }

  ul li div {
    margin-left: 20px;
  }


  ul li p {
    font-size: 24px;
  }

  /*!*  大于 800px *!*/
  /*@media (min-width: 800px) {*/
  /*  ul li p {*/
  /*    font-size: 24px;*/
  /*    padding-left: 275px;*/
  /*    padding-top: 30px;*/
  /*  }*/

  /*  ul li img {*/
  /*    height: 150px;*/
  /*    width: 260px;*/
  /*    float: left;*/
  /*  }*/

  /*  ul li span {*/
  /*    padding-top: 20px;*/
  /*  }*/
  /*}*/

  /*!*    700 到 800*!*/
  /*@media (min-width: 700px) and (max-width: 800px) {*/
  /*  ul li span {*/
  /*    padding-top: 0px;*/

  /*  }*/
  /*}*/

  /*!*  小与 700 px*!*/
  /*@media (max-width: 700px){*/
  /*  ul li p {*/
  /*    font-size: 16px;*/
  /*    padding-left: 165px;*/
  /*    padding-top: 30px;*/
  /*  }*/

  /*  ul li span {*/
  /*    font-size: 10px;*/
  /*  }*/

  /*  ul li img {*/
  /*    height: 100px;*/
  /*    width: 150px;*/
  /*    float: left;*/
  /*    display: inline-block;*/
  /*    margin-top: 25px;*/
  /*  }*/
  /*}*/



  /*ul {*/
  /*  list-style: none;*/
  /*}*/

  /*ul li {*/
  /*  background: beige;*/
  /*  height: 150px;*/
  /*  box-sizing: border-box;*/
  /*  margin-top: 20px;*/
  /*  border: 1px solid #ccc;*/
  /*  border-radius: 11px;*/
  /*}*/

  /*ul li div {*/
  /*  height: 150px;*/
  /*  !*display: inline-block;*!*/
  /*}*/

  /*ul li p a {*/
  /*}*/

  /*ul li span {*/
  /*  float: right;*/
  /*}*/


</style>
